<template>
  <div>
    <h2>用户信息列表</h2>
    <table>
      <tr>
        <td>
          用户名称<input type="text" v-model="fenye.uname">
          角色名称<select v-model="fenye.type">
            <option value="">请选择</option>
            <option value="管理员">管理员</option>
            <option value="普通用户">普通用户</option>
          </select>
          <input type="button" value="查询" @click="xian1()">
          <table border="1">
            <thead>
              <tr>
                <td>用户编号</td>
                <td>登录名称</td>
                <td>角色名称</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="em in info" :key="em.uid">
                <td>{{ em.uid }}</td>
                <td>{{em.uname  }}</td>
                <td>{{em.type  }}</td>
              </tr>
            </tbody>
          </table>
          <span>当前一共{{ fenye.totalcount }}条数据</span>
          <span>每页显示{{ fenye.pagesize }}条数据</span>
          <span>当前一共{{ fenye.pagecount }}页</span>
          <span>当前第{{ fenye.pageindex}}页</span>
          <a href="#" @click="page(1)">首页</a>
          <a href="#" @click="page(fenye.pageindex-1)">上一页</a>
          <a href="#" @click="page(fenye.pageindex+1)">下一页</a>
          <a href="#" @click="page(fenye.pagecount)">尾页</a>
          

        </td>
      </tr>
    </table>

  </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter();
const fenye=ref({
  uname:"",
  type:"",
  pageindex:1,
  pagesize:3,
  pagecount:0,
  totalcount:0,

})
const info=ref([{
  uid:1,
  uname:"",
  type:"",
}])
//分页
const page=(i:any)=>{
  if(i>=1&&i<=fenye.value.pagecount)
  {
    fenye.value.pageindex=i;
    xian();
  }
}
//钩子函数
onMounted(()=>{
  xian();
})
//查询按钮
const xian1=()=>{
  fenye.value.pageindex=1;
  xian();
}
//显示
const xian=()=>{
  axios({
    url:"http://localhost:59085/api/CF/dengluxianshi",
    method:"get",
    params:fenye.value
  }).then(res=>{
    info.value=res.data.b;
    fenye.value.pagecount=res.data.pagecount;
    fenye.value.totalcount=res.data.totalcount;
  })
}
  
</script>

<style scoped>

</style>